<!--
- Author:  LiShibin.
- Date:    2018/10/29 0004.
- File:    list.
-->
<template>
  <div>
    <div style="margin-bottom: 0.5rem;" class="Web_Box">
      <div class="Topmenu">
        <h1>淘只二手表</h1>
        <span></span>
      </div>
      <div class="qjdy">
        <!--搜索栏-->
        <div class="esb-top z-search-bar">
          <span @click="goSearch" style="width: 85%">
            <i class="iconfont icon-sousuo"></i>
            <input style="height: 28px;line-height: 20px;pointer-events: none;" type="text" placeholder="搜索你想要的表">
          </span>
          <i @click="goCart" class="iconfont icon-gouwuche on"></i>
        </div>
        <!--tab栏-->
        <div class="fenleiqh1 z-filter-bar">
          <ul>
            <li @click="toggleShowFilter(1)" :class="{'on': curFilter == 1}" class="fenlei1_pinpai">品牌 <i class="iconfont icon-xialaxiaojiantou1-copy"></i>
            </li>
            <li @click="toggleShowFilter(2)" :class="{'on': curFilter == 2}" class="fenlei1_paixu">排序 <i class="iconfont icon-xialaxiaojiantou1-copy"></i>
            </li>
            <li @click="toggleShowFilter(3)" :class="{'on': curFilter == 3}" class="fenlei1_saixuan">筛选 <i class="iconfont icon-xialaxiaojiantou1-copy"></i>
            </li>
            <li @click="toggleShowFilter(4)" :class="{'on': curFilter == 4}" class="fenlei1_saixuan">精选<i class="iconfont icon-xialaxiaojiantou1-copy" style="margin-left: 6px;"></i></li>
          </ul>
        </div>
        <!--商品Start-->
        <div class="shangpingbiaoge">
          <p class="gongzhaodao">共为您找到{{num}}件商品</p>
          <div class="con"
               v-infinite-scroll="loadMoreGoods"
               infinite-scroll-disabled="false"
               infinite-scroll-distance="0"
               infinite-scroll-immediate-check="false">
            <ul id="content">
              <!--<li v-for="item in goods.data" @click="gotoGoodsDetail(item.goods_commonid)">-->
              <!--<div class="pic">-->
                <!--<img :src="item.images_1" alt=""/>-->
              <!--</div>-->
              <!--<h3 class="slh2">{{item.goods_name}}</h3>-->
              <!--<p class="Price" style="display: flex;">￥{{item.goods_price}} <span class="yj">￥{{item.goods_marketprice}}</span></p>-->
            <!--</li>-->
              <!--<li v-for="item in goods.data" @click="gotoGoodsDetail(item.goods_commonid)">-->
                <!--<div class="shangpingbiaoge_img">-->
                  <!--<img :src="item.images_1" alt=""/>-->
                <!--</div>-->
                <!--<h3 class="shangpingbiaoge_name">{{item.goods_name}}</h3>-->
                <!--<p class="shangpingbiaoge_price" >￥{{item.goods_price}} <span class="yj">￥{{item.goods_marketprice}}</span></p>-->
              <!--</li>-->
              <li v-for="(item,index) in goods.data" @click="gotoGoodsDetail(item.goods_commonid)" style="">
                <!--<span class="left_label">{{item.degree}} <p>新</p></span>-->
                <div class="shangpingbiaoge_img">
                  <img :src="$config.website + '/test.php?sign=' + index + '&image=' + item.images_1" alt="" style="height: 6.4rem;width: auto;position: absolute;top: 50%;left: 50%;margin-left: 0;transform: translate(-50%, -50%);"></div>
                <p class="shangpingbiaoge_name" style="font-weight: initial">{{item.goods_name}}</p>
                <p class="shangpingbiaoge_price"><span>￥{{item.goods_price}}</span><span class="fr shangpingbiaoge_kucun">库存：{{item.goods_storage}}</span></p>
                <p><span class="gjck">参考公价：{{item.goods_marketprice}}</span></p>
              </li>
            </ul>
          </div>
          <loading-more :allLoaded="goods.allLoaded" :show="goods.data.length > 0"></loading-more>
          <empty-data :show="goods.allLoaded && goods.data.length <= 0" style="margin-top: 1.5rem"></empty-data>
        </div>
        <!--商品End-->
      </div>
      <!--品牌列表-->
      <div v-show="showFilter && curFilter == 1" class="brand-cont fenliezimu">
        <goods-classify :show="showBrand" :cont-height="classifyContHeight" :brandsData="brandsData" @chooseClassify="getBrand"></goods-classify>
      </div>
      <!--排序列表-->
      <div @click="hideFilter" style="display: none" v-show="showFilter && curFilter == 2" class="fenlei1_paixu_zhezhao">
        <ul>
          <li @click="changeSortWay(0)" :class="{'on': sortWay == 0}">默认</li>
          <li @click="changeSortWay(1)" :class="{'on': sortWay == 1}">最新</li>
          <li @click="changeSortWay(2)" :class="{'on': sortWay == 2}">价格从低到高</li>
          <li @click="changeSortWay(3)" :class="{'on': sortWay == 3}">价格从高到低</li>
        </ul>
      </div>
    </div>
    <!--筛选条件-->
    <div @click="hideFilter" style="display: none" v-show="showFilter && curFilter == 3" class="fenlei1_saixuan_zhezhao">
      <ul @click.stop style="height: 14rem;overflow: auto;padding-bottom: 1.8rem;">
        <li>
          <p>价格</p>
          <ul>
            <li @click="filterPrice(0)" :class="{'on': priceType == 0}">全部</li>
            <li @click="filterPrice(1)" :class="{'on': priceType == 1}">1000元以下</li>
            <li @click="filterPrice(2)" :class="{'on': priceType == 2}">1000-5000元</li>
            <li @click="filterPrice(3)" :class="{'on': priceType == 3}">5000-1万</li>
            <li @click="filterPrice(4)" :class="{'on': priceType == 4}">1万-10万</li>
            <li @click="filterPrice(5)" :class="{'on': priceType == 5}">10万以上</li>
          </ul>
        </li>
        <li v-for="(item, index) in filterCondition">
          <p>{{item.sp_name}}</p>
          <ul>
            <li @click="chooseFilterParam(index, cIndex)" :class="{'on': cell.checked}" v-for="(cell, cIndex) in item.list">{{cell.sp_value_name}}</li>
          </ul>
        </li>
      </ul>
      <div @click.stop class="saixuanbtn" style="height: 1.75rem;background-color: #fff;position: absolute;left: 0;top: 12.25rem;width: 100%;">
        <span @click="resetFilterParams" class="btn" style="margin-right: 1rem;">重置</span>
        <span @click="hideFilter" class="btn">确定</span>
      </div>
    </div>
    <!--筛选条件end-->
    <footer-tab></footer-tab>
    <!--精选列表-->
    <div class="fenlei1_saixuan_zhezhao" id="jingxuan" v-show="showAccurate == true" style="height: 12rem;overflow-y: auto">
      <ul>
        <li class="jingxuan_jaijge">
          <p>价格</p>
          <div class="jingxuan_jaijge_input">
            <input type="text" v-model="cost[0]" style="width: 4rem">
            <span>-</span>
            <input type="text" v-model="cost[1]" style="width: 4rem">
          </div>


          <div class="jingxuan_jaijge_huadong" ref="ruler">
            <div class="block " style="width: 100%;">
              <el-slider
                v-model="value9"
                range
                show-stops
                :max="150">
              </el-slider>
            </div>
            <div class="marker marker-0"><sup>$</sup>0</div>
            <div class="marker marker-25"><sup></sup>40万</div>
            <div class="marker marker-50"><sup></sup>75万</div>
            <div class="marker marker-75"><sup></sup>110万</div>
            <div class="marker marker-100" style="width: 40px;"><sup></sup>150万</div>
          </div>
        </li>
        <a>
          <li style="height: 60px;overflow: hidden;width: 100%;">
            <span>直径</span><p style="width: 90%;overflow-x: auto;white-space: nowrap;padding-left: .14rem;float: right;margin-right: 5px">
              <i class="iconfont icon-more fr" style="position: absolute;right: 10px;background: #fff;z-index: 1002"  @click="gotoDiameter"></i>
              <span class="jingxuan_zhijing" v-for="(item, i) in diameterData" @click="clear(i)">
                    {{item}}
                </span>
              <span class="jingxuan_zhijing" v-show="diameterData == ''" style="float: right">
                    无
                </span>
            </p>
          </li>
        </a>
        <li>
          <p>材质</p>
          <ul>
            <li @click="getPrototype(0)" :class="{'on': 0 == prototype}">所有类型</li>
            <li v-for="item in watchPrototype.quality" @click="getPrototype(item.sp_value_id)" :class="{'on': item.sp_value_id == prototype}">{{item.sp_value_name}}</li>
          </ul>
        </li>
        <li>
          <p>表盘</p>
          <ul>
            <li @click="getDial(0)" :class="{'on': 0 == dial}">所有类型</li>
            <li v-for="item in watchPrototype.dial"  @click="getDial(item.sp_value_id)" :class="{'on': item.sp_value_id == dial}">{{item.sp_value_name}}</li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import PullMorePromt from '../../components/pullMoreNotice'
  import Classify from '../../components/classify/classify'

  export default{
    mixins: [
      mapModules({goodsClassList: 'goodsClassList'}),
      mapRules({once: 'goodsClassList'})
    ],
    beforeRouteLeave(to, from, next) { // 处理p-fixed启用时，路由变化，导致其他页面无法滚动
      if (this.curFilter == 1) {
        this.disposeScrollPenetrate(0)
      }
      next()
    },
    data() {
      return {
        curBrand: this.$route.params.brand_id || '', // 当前品牌id
        sortWay: 0, // 排序方式
        searchKey: '', // 搜索关键字
        priceType: 0, // 价格类型  1:<1000 2:1000-5000 3:5000-10000 4:10000-100000 5:>100000
        goods: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []},
        curFilter: 0,  // 当前筛选类型 1:品牌 2:排序 3:筛选
        showFilter: false,  // 是否显示筛选模块
        showBrand: false, // 是否显示品牌
        brandsData: [], // 品牌数据
        filterCondition: [], // 筛选条件
        goods_command: this.$route.params.goods_command || '',
        num: 0,
        showAccurate: false,
        value9: [0, 150],
        watchPrototype: [],
        prototype: '',
        dial: '',
        cost: [0, 0],
        diameterData: []
      }
    },
    components: {
      'pullMorePromt': PullMorePromt,
      'goodsClassify': Classify
    },
    created() {
      if (this.$route.params.data) {
        this.diameterData = this.$route.params.data
        this.toggleShowFilter(4)
      }
      console.log(this.$route.params)
      if (this.$route.params.keyword) {
        this.searchKey = this.$route.params.keyword
      }
      this.getGoodsList()
      this.getFilterCondition()
      var screenHeight = window.screen.height || document.body.clientHeight
      window.document.body.style.minHeight = screenHeight + 'px'
      this.classifyContHeight = screenHeight - 136
      var tempBrands = this.$storage.getBrandsData()
      if (tempBrands) {
        this.brandsData = tempBrands
      }
    },
    watch: {
      $route () {
        this.curBrand = this.$route.params.brand_id || ''
        this.initGoodsList()
        this.getGoodsList()
      },
      value9: function() {
        console.log(this.value9[0].toString() + '-' + this.value9[1].toString())
        this.cost[0] = this.value9[0] * 10000
        this.cost[1] = this.value9[1] * 10000
      }
    },
    methods: {
      clear(i) {
        this.diameterData.splice(i, 1)
      },
      chooseGoodsList() {
        this.goods = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getGoodsList()
      },
      getPrototype(prototype) {
        this.prototype = prototype
        this.chooseGoodsList()
      },
      getDial(dial) {
        this.dial = dial
        this.chooseGoodsList()
      },
      goCart() {
        this.$router.push({name: 'cart-list'})
      },
      goSearch() {
        this.$router.push({name: 'search-search'})
      },
      toggleShowFilter(val) { // 切换显示筛选条件
        if (this.curFilter != val) {
          this.curFilter = val
          this.showFilter = true
          if (val == 1) {
            this.showBrand = true
            this.disposeScrollPenetrate(1)
          } else {
            this.showBrand = false
            this.disposeScrollPenetrate(0)
          }
        } else {
          if (this.showFilter) {
            this.curFilter = 0
          }
          if (this.showBrand) {
            this.showBrand = false
            this.disposeScrollPenetrate(0)
          }
          this.showFilter = !this.showFilter
        }
        if (val == 4) {
          this.priceType = 0
          this.showAccurate = !this.showAccurate
          this.$request.getWatchPrototype().then(data => {
            this.watchPrototype = data
          }).catch(e => {
            this.$toast('获取失败')
          })
        } else {
          this.showAccurate = false
          this.prototype = ''
          this.dial = ''
          this.cost = []
          this.diameterData = []
        }
      },
      disposeScrollPenetrate(type) { // 处理滚动穿透问题 type:0 close,1:open
        if (type == 1) {
          this.scrollTop = window.document.documentElement.scrollTop || window.document.body.scrollTop
          window.document.body.classList.add('p-fixed')
          window.document.body.style.top = '-' + this.scrollTop + 'px'
        } else {
          window.document.body.classList.remove('p-fixed')
          window.scrollTo(0, this.scrollTop)
        }
      },
      hideFilter() {
        this.showFilter = false
      },
      getBrand(evt) { // 选择品牌
        this.curBrand = evt.brand_id
        this.initGoodsList()
        this.getGoodsList()
        this.toggleShowFilter(0)
      },
      changeSortWay(val) { // 排序 0:默认，1:最新，2:价格高-低，3:价格低-高
        if (this.sortWay != val) {
          this.sortWay = val
          this.initGoodsList()
          this.getGoodsList()
        }
      },
      filterPrice(val) { // 筛选价格
        this.priceType = val
        this.initGoodsList()
        this.getGoodsList()
      },
      chooseFilterParam(index, cIndex) { // 筛选属性
        var paramsItem = this.filterCondition[index]
        var tempParams = {}
        tempParams.sp_id = paramsItem.sp_id
        tempParams.sp_name = paramsItem.sp_name
        tempParams.sp_field = paramsItem.sp_field
        var curParams = this.filterCondition[index].list
        for (var i = 0, l = curParams.length; i < l; i++) {
          if (curParams[i].checked) {
            curParams[i].checked = false
            if (i == cIndex) {
              break
            }
          }
          if (i == cIndex) {
            curParams[i].checked = true
          }
        }
        tempParams.list = curParams
        this.filterCondition.splice(index, 1, tempParams)
        this.initGoodsList()
        this.getGoodsList()
      },
      resetFilterParams() { // 重置筛选条件
        var sourceData = this.filterCondition.slice(0)
        for (var i = 0, l = sourceData.length; i < l; i++) {
          var tempList = sourceData[i].list
          for (var j = 0, jl = tempList.length; j < jl; j++) {
            if (tempList[j].checked) {
              tempList[j].checked = false
              break
            }
          }
        }
        this.filterCondition = sourceData
        this.initGoodsList()
        this.getGoodsList()
      },
      gotoGoodsDetail(goodsCommonid) {
        this.$router.push({name: 'goods-detail', params: {id: goodsCommonid}})
      },
      initGoodsList() {
        this.goods.requested = false
        this.goods.loading = false
        this.goods.allLoaded = false
        this.goods.page = 1
        this.goods.pageSize = 10
        this.goods.data = []
      },
      initRequestData() { // 初始化获取商品列表的 请求数据
        var postData = {}
        postData.page = this.goods.page
        postData.pageSize = this.goods.pageSize
        if (this.curBrand) { // 当前选中品牌
          postData.brand_id = this.curBrand
        }
        switch (this.sortWay) { // 价格排序
          case 0:
            break
          case 1:
            postData.sort_new = 1
            break
          case 2:
            postData.sort_price_down = 1
            break
          case 3:
            postData.sort_price_up = 1
            break
        }
        if (this.searchKey) { // 搜索关键字
          postData.goods_name = this.searchKey
        }
        if (this.priceType) { // 价格范围
          postData.price_around = this.priceType
        }
        if (this.goods_command != '') {
          postData.goods_commend = this.goods_command
        }
        var filterList = {}
        var filterData = this.filterCondition
        for (var i = 0, l = filterData.length; i < l; i++) {
          var filterItem = filterData[i].list
          for (var j = 0, jl = filterItem.length; j < jl; j++) {
            if (filterItem[j].checked) {
              filterList[filterData[i].sp_field] = filterItem[j].sp_value_id
            }
          }
        }
        if (Object.keys(filterList).length > 0) {
          postData.sp_list = filterList
        }
        return postData
      },
      getGoodsList() {
        this.goods.loading = true
        var params = this.initRequestData()
        params.shellName = this.prototype
        params.dialShapeName = this.dial
        params.cost = this.cost
        params.goodsSize = this.diameterData
        this.$request.getGoodsList(params).then(data => {
          if (data.goods_list.length < this.goods.pageSize) {
            this.goods.allLoaded = true
          }
          this.goods.data = [...this.goods.data, ...data.goods_list]
          this.num = data.num
        }).finally(() => {
          this.goods.requested = true
          this.goods.loading = false
        })
      },
      loadMoreGoods() {
        if (this.goods.loading || this.goods.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          ++this.goods.page
          this.getGoodsList()
        }, 500)
      },
      getFilterCondition() {
        this.$request.getFilterCondition().then(data => {
          this.filterCondition = data
          // console.log(data)
        })
      },
      gotoDiameter() {
        this.$router.push({name: 'goods-diameter'})
      }
    }
  }
</script>

<style>
  .fenleiqh1 .on{color: #e3c143;}
  .fenlei1_paixu_zhezhao ul li{color: #333;font-weight: normal;border-bottom: 1px solid #efefef;}

  .z-search-bar {position: fixed;top: 50px;left: 0;z-index: 10;padding: 10px;height: auto;}
  .z-search-bar span{height: 30px;}
  .z-filter-bar{position: fixed;width: 100%;left: 0;z-index: 10;top: 101px;padding: 0 6%;height: auto;}
  .z-filter-bar ul li{line-height: 35px;}
  .fenlei1_saixuan_zhezhao, .fenlei1_paixu_zhezhao{top: 136px;}
  .fenlei1_paixu_zhezhao .on{color: #e3c143;}
  .brand-cont{position: fixed;top: 136px;left: 0;bottom: 0;width: 100%;z-index: 999;
    background-color: white;font-size: 14px;color: #333;font-weight: normal;text-align: left;}
  .fenlei1_saixuan_zhezhao ul li .on{color:#e3c143;}
  .saixuanbtn>span.btn{margin: 0.25rem 0;height: 1.25rem;line-height: 1.25rem;}
  .mint-indexlist-nav{
    justify-content: left !important;
    position: fixed;
    right: 5px;
    line-height: 13px;
    font-size: 12px;
    text-align: center;
    color: #50a3ff;
    border-left: solid 1px transparent!important;
  }
  .el-slider__bar{
    background-color: #e3c143;
  }
  .el-slider__button{
    border: 2px solid #e3c143;
  }
  .brand-cont{
    top: 28px
  }
  .on{
    color:#e3c143;
  }
  .el-slider__runway {
    margin: 0px 0!important;
  }
</style>
